<template>
  <div class="treeDataBox">
    <el-table
      :data="reqParamTabData"
      default-expand-all
      style="width: 100%"
      border
      row-key="id"
      stripe
      size="small"
      :tree-props="{
        children: 'children',
        hasChildren: 'hasChildren',
      }"
    >
      <el-table-column prop="targetName" label="目标名称"> </el-table-column>
      <el-table-column prop="originalName" label="原始名称"> </el-table-column>
      <el-table-column prop="example" label="示例值"> </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-tooltip content="添加子节点" placement="top">
          <el-button size="mini" @click="appendChild(scope.row)"
          circle type="primary" icon="el-icon-plus"
            ></el-button
          >
          </el-tooltip>
          <el-tooltip content="删除" placement="top">
          <el-button
            v-if="scope.row.targetName != 'ROOT'"
            size="mini"
            circle type="danger" icon="el-icon-minus"
            @click="remove(scope.row)"
            ></el-button
          >
          </el-tooltip>
          <el-tooltip content="编辑" placement="top">
          <el-button
            v-if="scope.row.targetName != 'ROOT'"
            size="mini"
            circle type="info" icon="el-icon-edit"
            @click="edit(scope.row)"
            ></el-button
          >
          </el-tooltip>          
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-dialog
        :title="dialogTitle"
        width="480px"
        style="text-align: left"
        :visible.sync="isShow"
        :close-on-click-modal="false"
        :before-close="beforClose"
        destroy-on-close
      >
        <el-form ref="tableForm" :model="tableForm" label-width="100px" size="small">
          <el-form-item label="请求参数名">
            <el-input v-model="tableForm.targetName" @input="onInput"></el-input>
          </el-form-item>
          <el-form-item label="原始参数名">
            <el-input v-model="tableForm.originalName" @input="onInput"></el-input>
          </el-form-item>
          <el-form-item label="示例值">
            <el-input v-model="tableForm.example" @input="onInput"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-if="!editMode" @click="addNode">创建</el-button>
            <el-button type="primary" v-if="editMode" @click="updateNode">更新</el-button>
            <el-button @click="beforClose">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogTitle: '添加节点',
      curRow: null,
      isShow: false,
      editMode: false,
      tableForm: {
        targetName: null,
        originalName: null,
        example: null,
      },
      reqParamTabData: [
        {
          parentId: "N",
          id: "R",
          targetName: "ROOT",
          originalName: "--",
          example: "--",
          index: 0,
          children: [],
        },
      ],
    };
  },
  methods: {
    onInput(){
      this.$forceUpdate();
    },
    getUuid() {
        var s = [];
        var hexDigits = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"
        for (var i = 0; i < 36; i++) {
            s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
        }
        s[14] = "4"
        s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1)
        s[8] = s[13] = s[18] = s[23] = "-"
        let uuid = s.join("")
        return uuid;
    },
    addNode() {
      //   const id = this.curRow.id + "_" + (this.curRow.children.length + 1);
      const id = this.getUuid();
      const node = {
        parentId: this.curRow.id,
        id: id,
        targetName: this.tableForm.targetName,
        originalName: this.tableForm.originalName,
        example: this.tableForm.example,
        children: [],
      };
      this.curRow.children.push(node);
      this.isShow = false;
      this.curRow = null;
      this.tableForm = {};
    },
    updateNode() {
      this.curRow.targetName = this.tableForm.targetName;
      this.curRow.originalName = this.tableForm.originalName;
      this.curRow.example = this.tableForm.example;
      this.tableForm = {};
      this.isShow = false;
      this.editMode = false;
    },
    appendChild(row) {
      this.isShow = true;
      this.curRow = row;
      this.dialogTitle = '添加节点';
    },
    edit(row) {
      this.tableForm.targetName = row.targetName;
      this.tableForm.originalName = row.originalName;
      this.tableForm.example = row.example;
      this.curRow = row;
      this.editMode = true;
      this.isShow = true;
      this.dialogTitle = '更新节点';
    },
    beforClose() {
      this.isShow = false;
      this.editMode = false;
      this.tableForm = {};
    },
    removeNode(row) {
      const parentId = row.parentId;
      const id = row.id;
      console.log("父id：" + parentId + " id: " + row.id);

      // 先将树遍历出来放入arr中
      var tempArr = [];
      this.findTableNode(this.reqParamTabData[0], tempArr);
      console.log(JSON.stringify(tempArr));

      // 通过id定位当前节点父节点
      let parentNode = null;
      for (var i = 0; i < tempArr.length; i++) {
        if (tempArr[i].id === parentId) {
          parentNode = tempArr[i];
          break;
        }
      }

      // 在父节点的孩子中找到该节点下标进行移除
      if (parentNode != null) {
        let arr = parentNode.children;
        for (var i = 0; i < arr.length; i++) {
          if (arr[i].id === id) {
            arr.splice(i, 1);
            break;
          }
        }
      }
    },
    remove(row) {
      if (row.children != null && row.children.length != 0) {
        this.$confirm("当前删除节点包含子节点！确定删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
        }).then(() => {
          this.removeNode(row);
        });
      } else {
        this.removeNode(row);
      }
    },
    findTableNode(tableData, arr) {
      console.log(JSON.stringify(tableData));
      if (tableData == null) {
          return;
      }
      arr.push(tableData);
      for (var i = 0; i < tableData.children.length; i++) {
        this.findTableNode(tableData.children[i], arr);
      }
    },
    
  },
};
</script>